[ElementTiming] Mimic FCP++ rect computations This CL changes ElementTiming rect computation to use a computation similar to that used by FCP++, but relative to the owning frame. The tests show that the new computation seems more accurate as they uncovered a problem with the SVG test: default SVG size is 300x150 so it was clipping the <image> element inside. A test for rect coordinates relative to iframe is added. Bug: 879270, 943138 Change-Id: Ib8fa266bda76843fbf7ca07f82ac5bb245d52c4d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1531503 Reviewed-by: Liquan (Max) Gu <maxlg@chromium.org> Reviewed-by: Mason Freed <masonfreed@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#645021} diff --git a/element-timing/image-clipped-svg.html b/element-timing/image-clipped-svg.html new file mode 100644 index 0000000..13c4a81 --- /dev/null +++ b/element-timing/image-clipped-svg.html
@@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe image inside SVG with small dimensions</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> +let beforeRender; +async_test(function (t) { + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const index = window.location.href.lastIndexOf('/'); + const pathname = window.location.href.substring(0, index) + + '/resources/circle.svg'; + checkElement(entry, pathname, 'my_svg', beforeRender); + // Image size is 200x200 but SVG size is 100x100 so it is clipped. + checkRect(entry, [0, 100, 0, 100]); + }) + ); + observer.observe({entryTypes: ['element']}); + beforeRender = performance.now(); +}, "Able to observe svg image."); +</script> +<style> +body { + margin: 0; +} +</style> +<svg width="100" height="100"> + <image href='resources/circle.svg' elementtiming='my_svg'/> +</svg> diff --git a/element-timing/image-rect-iframe.html b/element-timing/image-rect-iframe.html new file mode 100644 index 0000000..da46d78 --- /dev/null +++ b/element-timing/image-rect-iframe.html
@@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: check intersectionRect for element in iframe</title> +<body> +<style> +body { + margin: 50px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + async_test((t) => { + on_event(window, 'message', e => { + assert_equals(e.data.length, 1); + assert_equals(e.data.entryType, 'element'); + const rect = e.data.rect; + // rect should start at (0,0) even though main frame has a margin. + assert_equals(rect.left, 0); + assert_equals(rect.right, 100); + assert_equals(rect.top, 0); + assert_equals(rect.bottom, 100); + t.done(); + }); + }, 'Element Timing entry in iframe has coordinates relative to the iframe.'); +</script> +<iframe src="resources/iframe-with-square-sends-entry.html"/> +</body> diff --git a/element-timing/observe-svg-image.html b/element-timing/observe-svg-image.html index f127152..fdfe25ec 100644 --- a/element-timing/observe-svg-image.html +++ b/element-timing/observe-svg-image.html
@@ -28,6 +28,6 @@ margin: 0; } </style> -<svg> +<svg width="300" height="300"> <image href='resources/circle.svg' elementtiming='my_svg'/> </svg>
diff --git a/element-timing/resources/iframe-with-square-sends-entry.html b/element-timing/resources/iframe-with-square-sends-entry.html new file mode 100644 index 0000000..3c43a41 --- /dev/null +++ b/element-timing/resources/iframe-with-square-sends-entry.html
@@ -0,0 +1,21 @@ +<!DOCType html> +<html> +<style> +body { + margin: 0; +} +</style> +<body> +<script> + const observer = new PerformanceObserver(entryList => { + top.postMessage({ + 'length' : entryList.getEntries().length, + 'entryType' : entryList.getEntries()[0].entryType, + 'rect' : entryList.getEntries()[0].intersectionRect, + }, '*'); + }); + observer.observe({entryTypes: ['element']}); +</script> +<img src=square100.png elementtiming=my_image/> +</body> +</html> 